<template>
  <div class="senderBox">
    <group title="姓名">
      <x-input  name="username" placeholder="请输入姓名" is-type="china-name" v-model="senderName"></x-input>
    </group>
    <group title="电话">
      <x-input  name="mobile" placeholder="请输入手机号码" keyboard="number" is-type="china-mobile" v-model="senderPhone"></x-input>
    </group>
     <group title="地址">
      <x-address  title="" v-model="senderArdess" :list="addressData" inline-desc="请选择您的地址"></x-address>
    </group>
    <group title="详细信息">
      <x-input  placeholder="请输入详细信息" :min="2" :max="20" v-model="senderInfo"></x-input>
    </group>
    <group class="senderBoxBtn">
      <x-button  type="primary" @click.native="bakcHome">添加</x-button>
    </group>
   
  </div>
</template>

<script>
import { XInput ,Group,GroupTitle,XButton,Picker,PopupPicker,XSwitch,Divider,Cell,XAddress,ChinaAddressV3Data} from 'vux'
import store from '@/vuex/store'

export default {
  name: 'hello',
  data () {
    return {
      senderDate:{},
      senderName:'',
      senderPhone:'',
      senderArdess:[],
      senderInfo:'',
      // adressListItem:[],
      addressData:ChinaAddressV3Data,
    }
  },
  methods:{
     change (value) {
      console.log('new Value', value)
    },
    bakcHome(){
      var _this = this;
      if(this.senderName === "" || this.senderPhone === "" || this.senderArdess === "" || this.senderInfo === ""){
        this.$vux.toast.show({
          text:"信息填写不完整"
        })
        return false;
      }
     
      this.senderDate = {
        name:this.senderName,
        phone:this.senderPhone,
        address:this.senderArdess,
        info:this.senderInfo
      }
      _this.$vux.toast.show({
        text:'编辑成功',
        onHide(){
          _this.$store.state.receive = _this.senderDate;
          _this.$store.commit('showUserName')
          _this.$router.push({
          name:'Home',
          })
        }
      })
    },
   
  },

  components:{
    XInput,
    Group,
    GroupTitle,
    XButton,
    Picker,
    PopupPicker,
    XSwitch,
    Divider,
    Cell,
    XAddress,
    ChinaAddressV3Data
  },
  store
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->

